<template>
  <!-- 查询业务 -->
  <el-form :inline="true" :model="SearchData">
    <el-form-item label="项目名称">
      <selectProjectName v-model:projectNameCode="SearchData.projectCode"></selectProjectName>
    </el-form-item>
    <el-form-item label="项目技术栈">
        <TechnologyForm name="skillName" :checkboxData="technology" v-model:technology="SearchData.skillBaseId"></TechnologyForm>
    </el-form-item>
    <el-form-item label="项目创建时间">
      <el-date-picker
        v-model="SearchData.date"
        type="daterange"
        range-separator="到"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        size="default"
        value-format="YYYY-MM-DD"
      />
    </el-form-item>
    <el-form-item label="项目指导类型">
      <el-select v-model="SearchData.typeBaseId" clearable placeholder="指导类型">
          <el-option
            v-for="item in typeOptions"
            :key="item.id"
            :label="item.typeName"
            :value="item.id"
          />
        </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getTable(1)">查询</el-button>
      <el-button type="primary" @click="getTable(1,'重置')">重置</el-button>
    </el-form-item>
  </el-form>
  <!-- 添加业务 -->
  <el-button type="primary" @click="addState = true">添加项目</el-button>
  <el-dialog v-model="addState" title="添加项目" width="40%" draggable>
    <el-form :model="addData" >
      <el-form-item label="项目名称">
        <selectProjectName v-model:projectNameCode="addData.projectCode"></selectProjectName>
      </el-form-item>
  
      <el-form-item label="项目技术栈">
        <TechnologyForm name="skillName" :checkboxData="technology" v-model:technology="addData.skillBaseId"></TechnologyForm>
      </el-form-item>
      <el-form-item label="项目指导类别">
        <el-select v-model="addData.typeBaseId" clearable placeholder="Select">
          <el-option
            v-for="item in typeOptions"
            :key="item.id"
            :label="item.typeName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="项目指导价格">
        <el-input v-model="addData.projectName" placeholder="请输入价格" clearable />
      </el-form-item> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addState = false">取消</el-button>
        <el-button type="primary" @click="addTable">
          添加
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 展示业务 -->
  <tablePage  :tableTitle="tableTitle" @getTableData = 'getTable' @deleteTable = 'deleteTable' @updateTable="updateTable" :tableData = 'data'></tablePage>

<!-- 修改业务业务 -->
  <el-dialog v-model="xiugaistate" title="修改类别" width="40%" draggable>
    <el-form :inline="true" :model="updateData" class="demo-form-inline">
      <el-form-item label="类别">
        <el-input v-model="updateData.projectName" placeholder="请输入类别" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="xiugaistate = false">取消</el-button>
        <el-button type="primary" @click="xiugaistate = false">
          确认修改
        </el-button>
      </span>
    </template>
  </el-dialog>
  
</template>

<script setup>

import tablePage from '../components/table.vue'
import TechnologyForm from '../components/publicForm/TechnologyForm.vue'
import selectProjectName from '../components/publicForm/selectProjectName.vue'
import { projectGuideInsert, projectGuideDelete, projectGuideUpdate, projectGuideSelect,projectBaseSelectByName,typeSelectAll } from '../utils/api.js'
import { reactive, ref ,onMounted} from 'vue'

// 获取数据数据中心的表单数据
import { formStore } from '../stores/formStore'
import { storeToRefs } from 'pinia'
const formStoreState = formStore()
const { technology } = storeToRefs(formStoreState)
const states = [
  'Alabama',
  'Alaska',
  'Arizona',
  'Arkansas',
  'California',
  'Colorado',
  'Connecticut',
  'Delaware',
  'Florida',
  'Georgia',
  'Hawaii',
  'Idaho',
  'Illinois',
  'Indiana',
  'Iowa',
  'Kansas',
  'Kentucky',
  'Louisiana',
  'Maine',
  'Maryland',
  'Massachusetts',
  'Michigan',
  'Minnesota',
  'Mississippi',
  'Missouri',
  'Montana',
  'Nebraska',
  'Nevada',
  'New Hampshire',
  'New Jersey',
  'New Mexico',
  'New York',
  'North Carolina',
  'North Dakota',
  'Ohio',
  'Oklahoma',
  'Oregon',
  'Pennsylvania',
  'Rhode Island',
  'South Carolina',
  'South Dakota',
  'Tennessee',
  'Texas',
  'Utah',
  'Vermont',
  'Virginia',
  'Washington',
  'West Virginia',
  'Wisconsin',
  'Wyoming',
]

/* 每页显示多少条数据 */
import { limit } from '../utils/utilsData'
/* 添加数据的弹框状态 */
const addState = ref(false)
/* 添加弹框状态--修改函数 */
const addStateObj = () => { 
  addState.value = !addState.value
}
/* 添加弹框状态--修改函数 */
const xiugaistate = ref(false)
/* 修改弹框状态--修改函数 */
const updateStateObj = (row) => { 
  if (xiugaistate.value) { 
    xiugaistate.value = false
    return
  }
  xiugaistate.value = true
  /* 该函数内部要将表格行数据绑定在修改表单的数据上 */
  updateData.id = row.id
  updateData.projectName = row.projectName
}
// 表头的数据
const tableTitle = [
  {key:'projectCode',name:'项目编号'},
  {key:'projectBase.projectName',name:'项目名称'},
  {key:'projectBase.projectDescribe',name:'项目描述'},
  {key:'projectBase.projectProfile',name:'项目简介'},
  {key:'skillBaseArray',name:'项目技术栈'},
  {key:'projectBase.projectCreateTime',name:'项目上传时间'},
  {key:'typeBase.typeName',name:'项目指导类别'},
  // {key:'name',name:'项目指导价格'},
]
// 页面加载数据
const data = reactive({
  nowPage: 2,
  maxPage: 10,
  data: []
})
const SearchData = reactive({
  projectCode: '',
  skillBaseId: [],
  typeBaseId: '',
  date:''
})
const addData = reactive({
  projectBaseId:7
})
const updateData = reactive({})

/* 分页及多条件的查询接口 -- 函数 ajax */
const getTable = (pageNum,chongzhiState) => { 
  if (chongzhiState) { 
    /* 将所有查询条件设置为空 */
    SearchData.projectCode = "";
  }
  projectGuideSelect({
    limit:limit,
    page: pageNum,
    ...SearchData
  }).then(resp => { 
    data.nowPage = resp.nowPage
    data.maxPage = resp.maxPage
    let mydata = resp.data.map(item => { 
      item.skillBaseArray = []
      item.skillBase.forEach(element => {
        item.skillBaseArray.push(element.skillName)
      });
      item.skillBaseArray = item.skillBaseArray.join()
      return item
    }) 
    console.log(mydata)
    data.data = mydata
  })
  data.nowPage = pageNum
}

/* 添加业务--函数ajax */
const addTable = () => { 
  projectGuideInsert(addData).then(res => {
    addStateObj()
    getTable(1)
  })
}
/* 查询业务--函数ajax */
const updateTable = () => { 
  projectGuideUpdate({
    id:updateData.id,
    skillName:updateData.projectName
  }).then(resp => { 
    updateStateObj()
    getTable(1)
  })
}
/* 删除业务--函数ajax */
const deleteTable = (row) => { 
  projectGuideDelete({
    id:row.id
  }).then(resp => { 
    getTable(1)
  })
}
const typeOptions = ref([])
/* 页面加载完毕后执行的函数--渲染首页数据 */
onMounted(() => { 
  getTable(1)
  typeSelectAll({}).then(resp => { 
    if (resp.code == 200) { 
      typeOptions.value = resp.data
    }
  })
})
const options = ref([])
const remoteMethod = (query) => {
  if (query) {
    projectBaseSelectByName({
      projectName:query
    }).then(resp => {
      console.log(resp.data)
      if(resp.code == 200) options.value = resp.data
    })
  } else {
    options.value = []
  }
}


</script>
<style scoped>
</style>